TS基础知识 | 青训营

107 阅读2分钟

1.TS 初识

1、微软开发的一款开源的编程语言

2、是JavaScript的超集,遵循最新的ES6、ES5规范。typescript扩展了JavaScript的语法

3、本质上添加了可选的静态类型和基于类的面向对象编程,通俗的理解为JavaScript的一个特殊版本,其语法规范严谨,适用于开发大型项目应用

4、谷歌也在大力支持typescript的推广,谷歌的angular2.x就是基于typescript

5、最新的vue、react也集成typescript

6、nodeJS框架的Nextjs、midway中用的就是typescript

2.ts 开发环境搭建及自动编译

1、全局安装, npm i typescript -g

2、运行ts,之后会把ts文件编译为js文件 tsc demo.ts

3、自动编译配置及运行

① tsc --init,创建tsconfig.json文件

② 在tsconfig.json中,加入 "outDir": "./js",

③ tsc -p tsconfig.json --watch;自动编译生效

3.对象类型

// 创建一个对象,包括以下属性,类型为IBytedancer

// I表示自定义的一个类型(一个命名约定),与类和对象进行区分

const bytedancer: IBytedancer = {
   jobId: 9303245,
    name: 'Lin',
    sex: 'man',
    age: 28,
    hobby: 'swimming',
}

// 定义一个类型为IBytedancer
interface IBytedancer {
	/* 只读属性readonly:约束属性不可在对象初始化外赋值 */
	readonly jobId: number;
    name: string;
    sex: 'man' | 'woman' | 'other';
    age: number;
    /* 可选属性:定义该属性可以不存在 */
    hobby?: string;
    /* 任意属性:约束所有对象属性都必须是该属性的子类型 */
    [key: string]: any; // any 任何类型
}
/* 报错:无法分配到"jobId",因为它是只读属性 */
bytedancer. jobId = 12345;
/* 成功:任意属性标注下可以添加任意属性 */
bytedancer .plateform = 'data';
/* 报错:缺少属性"name", 而hobby可缺省 */
const bytedancer2: IBytedancer = {
    jobId: 89757,
    sex: " woman ',
    age: 18,
}

4.函数类型

function add(x, y!) 
{ return x + y; } const mult = (x, y) => x * y;