TypeScript入坑

chuyao 发布于2019-08-23 12:25 / 470人阅读

摘要：入坑安装使用安装使用全局方式安装编辑器安装插件编译使用进行编译编写文件编译上方为编译好的文件类型注解将其注解为类型将其注解为类型变量声明由于没有块级作用域，使用会出现以下问题仍然可以访问为，由于的变量作用注册在作用域链上造成的结果，解决方

TypeScript 入坑

安装

使用npm安装
使用全局方式安装

npm install -g typescript

编辑器

安装插件 https://github.com/Microsoft/...
https://packagecontrol.io/pac...
编译使用node.js进行编译

hello world

编写ts文件

function greeter(person) {
    return "Hello world!" + person;
}
let user = "hello world";

document.body.innerHTML = greeter(user);

编译

PS C:UsersmingmDesktop	s> tsc greeter.ts
Active code page: 65001
PS C:UsersmingmDesktop	s>

上方为编译好的js文件

function greeter(person) {
    return "Hello world!" + person;
}
var user = "hello world";
document.body.innerHTML = greeter(user);

类型注解

function greeter(person: string){    // 将其注解为string类型
    return "hello," + person;
}

let user = [0, 1, 2];
document.body.innerHTML = greeter(user);

将其注解为string类型

变量声明

由于js没有块级作用域，使用var会出现以下问题

for(var i = 1: i <= 10; i++) {
}
console.log(i);

仍然可以访问i为10，由于js的变量作用注册在作用域链上造成的结果，解决方案，使用闭包

let

let属于块级作用域

const

赋值以后不能再改变

解构赋值

let input = [1,2];
let input1 = [2,3];
// 解构赋值
[input[0], input[2]] = [2,3]
// 同样的也可以创建剩余变量
let[first,...rest] = [1,2,3,4,5];
// first 为 1， rest 为[2,3,4,5]

联合类型

let myFavoriteNumber: string | number
myFavoriteNumber = "seven";
myFavoriteNumber = 7;

var myFavoriteNumber;
myFavoriteNumber = "seven";
myFavoriteNumber = 7;

访问联合类型的属性和方法

只能访问共有的属性和方法

function getString(something:string | number):string {
    return something.toString();
}

function getString(something) {
    return something.toString();
}

接口

对类的一部分行为进行抽象（即方法）抽象出接口。

防盗门和车都有报警这个方法，将报警这个方法抽象出来，成为这两个的接口

接口建议名称前加上I

// 定义一个接口，接口的类型名称为person
interface Iperson{
    name: string;
    age: number;
}

// 使用接口
function greeter(person: Iperson):string {
    return "hello world" + person.name + person.age;
}

// 传入对象
let user = { name: "hello world", age: 23 };
// 调用
document.body.innerHTML = greeter(user);

// 使用接口
function greeter(person) {
    return "hello world" + person.name + person.age;
}
// 传入对象
var user = { name: "hello world", age: 23 };
// 调用
document.body.innerHTML = greeter(user);

可选属性

// 定义一个接口，接口的类型名称为person
interface Iperson{
    name: string;
    age?: number;
}

// 使用接口
function greeter(person: Iperson):string {
    return "hello world" + person.name + person.age;
}

// 传入对象
let user = { name: "hello world"};
// 调用
document.body.innerHTML = greeter(user);

// 使用接口
function greeter(person) {
    return "hello world" + person.name + person.age;
}
// 传入对象
var user = { name: "hello world" };
// 调用
document.body.innerHTML = greeter(user);

接口传入任意值

// 定义一个接口，接口的类型名称为person
interface Iperson{
    name: string;
    age?: number;
    [propName: string]: any;    // 任意数据取string类型的值
}

// 使用接口
function greeter(person: Iperson):string {
    return "hello world" + person.name + person.age + person.ming;
}

// 传入对象
let user = { name: "hello world", ming:"hello world"};
// 调用
document.body.innerHTML = greeter(user);

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98474.html

入坑codewars

摘要：，黑色的主题风格，很符合。时间复杂度虽然成功，但我明显感觉代码写得不是很优雅。这个是没错的，但缺乏了宏观的视角，会变得片面。但是不重要，关键是这个思想要学习，可以应用到其他地方。求和，大于就返回偶数的位置，否则返回奇数的位置。前几天做LeetCode上的大数乘法，代码没错，可就是提交不成功，显示SyntaxError: Unexpected token var我把所有代码都注释掉，只...

sherlock221 2019-08-26 12:10 评论0 收藏0
Ionic2入坑基础教程和安装指南

摘要：安装程序主要通过命令行工具来创建和开发，并使用来构建和部署为原生应用程序。基础教程确保完成之前的安装并测试启动成功。安装Ionic Ionic 2 程序主要通过Ionic命令行工具CLI来创建和开发，并使用Cordova来构建和部署为原生应用程序。也就是说我们需要先安装一些工具来实现程序开发。安装Ionic CLI 和 Cordova 要创建 Ionic 2 项目，你需要安装最新版...

jayce 2019-08-21 14:35 评论0 收藏0
两年React老兵的总结 - 类型检查篇

摘要：系列引言最近准备培训新人为了方便新人较快入手开发并编写高质量的组件代码我根据自己的实践经验对组件设计的相关实践和规范整理了一些文档将部分章节分享了出来由于经验有限文章可能会有某些错误希望大家指出互相交流由于篇幅太长所以拆分为几篇文章主要有以系列引言最近准备培训新人, 为了方便新人较快入手 React 开发并编写高质量的组件代码, 我根据自己的实践经验对React 组件设计的相关实践...

scola666 2019-08-23 18:38 评论0 收藏0
2017个人总结

摘要：特此写个流水账总结，供自己以后羞耻的回顾。正逢月计划辞职回家玩游戏过个暑假，结果在如今部门老大的忽悠下加入到了新东家。和组长两人继续没昼夜的忙活，最终也按时交差，上了线。卷土重来，回报过去的一份念旧，期待的美好，个人选型入坑。前言 2017年发生了太多的事情，结了婚，住进了新家，成功的播了种，当上了准爸爸。公司也蒸蒸日上搬进了高大上的写字楼。前端的坑越来越大，都来不及填。特此写个流水...

Jason 2019-08-22 13:49 评论0 收藏0
前端小报 - 201903月刊

摘要：热门文章我在淘宝做前端的这三年红了樱桃，绿了芭蕉。文章将在淘宝的三年时光折射为入职职业规划招聘晋升离职等与我们息息相关的经验分享，值得品读。 showImg(https://segmentfault.com/img/remote/1460000018739018?w=1790&h=886); 【Alibaba-TXD 前端小报】- 热门前端技术快报，聚焦业界新视界；不知不觉 2019 ...

李义 2019-08-30 15:43 评论0 收藏0