1.TypeScript是什么?
TypeScript是javaScript的超集。
2.使用TypeScript
1)全局安装nodejs
2)安装TypeScript编译器
npm i -g typescript
3.编译ts文件
//注意:需要在ts文件同级目录执行此命令,否则会报找不到文件错误
//编译成功后,会生成一个同名的js文件
tsc 'ts文件名称'
3.编译优化
1)ts和编译后的js同名冲突问题
//1.生成tsconfig.json文件
tsc init //生成tsconfig.json文件
//2.修改tsconfig.json的strict属性为false或者注释掉
2)修改自动编译
//在终端执行此命令
tsc --watch
3)ts错误文件存在错误,抛出错误,并不自动编译
tsc --noEmitOnError --watch
4.定义显示类型
定义了显示类型可以避免一些类型不对引发的错误。
const say(word:string){
}
say('hello')
5.降级编译
通过修改tsconfig.json文件中的target属性,来控制编译出来的js文件能兼容到哪个js版本。tsconfig.json默认是es2016,也就是es7。
6.基元类型
String、Number、Boolean
7.type及interface
type:不能存在同名的情况,只能定义新的type基于一个已有的type进行扩展。
interface:可以存在同名的情况,多个接口内的属性会自动合并。
/*
*类型
*/
type Point = {
x:number,
y:number
}
//在Point扩展一个y属性生成一个新的类型
type onePoint = Point & {
y:number
}
*
*接口
*/
interface Person{
name:string,
age:number
}
interface Person {
sex:string
}
interface yellowPerson extends Person{
color:string
}
8.类型断言
通过as 或者 <> 可以实现类型断言
const div = document.getElementById('div1') as HTMLDivElement
const div2 = <HTMLDivElement>document.getElementById('div1')
const x = ('hello' as unknown) as number
9.文字类型(类似常量)
例如以下例子:使用了文字类型+ 字符串的组合方式, printText方法第2个参数只能传left、right、center中的一个,不能传递其他值。
// 文本类型
function printText(s:string, alignment:'left' | 'right' | 'center'){
console.log(s,alignment)
}
printText('hello', 'left')