TS特性讲解
2019-01-13 本文已影响0人
左冬的博客
安装
npm install typescript@2.9.2 -g
npm install ts-node@7.0.0 -g
// 想尝试新版本的同学可以去掉 @2.9.2 和 @7.0.0
创建 tsdemo/.vscode/launch.json文件：
{
"configurations": [
{
"name": "ts-node",
"type": "node",
"request": "launch",
"program": "注意看这里，要写成ts-node对应的可执行文件，Windows 用户注意了，你应该写成 ${workspaceRoot}/node_modules/ts-node/dist/bin.js",
"args": ["${relativeFile}"],
"cwd": "${workspaceRoot}",
"protocol": "inspector"
}
]
}
在命令行输入下面的命令，你会得到一个路径，这个路径就是launch.json配置中的可执行文件
$ which ts-node
打开tsdemo/1.ts，找到调试选项，选择ts-node然后点击调试，就可以看到控制台的输出结果啦
配置
开发环境配置好了，可以愉快的上手写demo啦
数据类型
any
any类型
枚举
枚举
上面图片我们发现打印出的值是
0和1，这是因为我们没有给枚举赋值赋值后：
枚举
void
void类型
报错
当我们不想给一个函数返回值的时候可以给它一个
void类型，因为
function print(x: any): void{
console.log(x)
}
pring(1) // undefined
默认情况下null和undefined是所有类型的子类型。 就是说你可以把 null和undefined赋值给number类型的变量。
let a: number = null
let b: string = undefined
类型断言
方法一：
let n: any = '123'
console.log((<string>n).split(''))
// Array(3) ["1", "2", "3"]
方法二：
let n: any = '123'
console.log((n as string).split(''))
// Array(3) ["1", "2", "3"]
结构与展开
结构
{
function sayHi({name, age}: any){
console.log(`Hi,${name},${age}`)
}
sayHi({name:'jack', age:18})
}
// Hi,jack,18
展开
let a1 = [1,2,3]
let a2 = [4,5,6]
let a3 = [...a1, ...a2]
console.log(a3)
let b1 = {name: 'jack', age: 18}
let b2 = {nation: 'China'}
let b3 = {...b1, ...b2}
console.log(b3)
// Array(6) [1, 2, 3, 4, 5, 6]
// Object {name: "jack", age: 18, nation: "China"}
接口
接口就是用代码描述一个对象必须有什么属性（包括方法），但是有没有其他属性就不管了。
比如「一个电脑有USB接口」的意思是这个电脑能够插入USB设备，这个电脑其他功能就随意了。
interface Shape {
head: string
body: string
}
interface Human {
name: string
age: number
shape: Shape
say(word: string): void
}
let frank: Human = {
name: 'frank',
age: 18,
shape: {
head: '头',
body: '身体'
},
say(word: string){
console.log(word)
}
};
frank.say('I am frank!')
只读属性
interface Shape {
head: string
body: string
}
interface Human {
name: string
age: number
shape: Shape
say(word: string): void
}
let frank: Human = {
name: 'frank',
age: 18,
shape: {
head: '头',
body: '身体'
},
say(word: string){
console.log(`${this.name}: ${word}`)
}
};
frank.name = 'jack'
frank.say('你好!')
// jack: 你好!
可以发现属性是可以被修改的，所以当我们不希望某个属性被修改的时候可以在属性名前加上readonly
只读属性
如果是常数属性使用
const关键字
可选属性
接口要求对象必须包含接口内的属性，否则报错。所以TypeScript提供了可选属性使编程更加灵活。
[图片上传失败...(image-9324c7-1547378117542)]
给一个不是那么必须的属性加上?
interface Shape {
head: string
body: string
}
interface Human {
readonly name: string
age: number
shape: Shape
likedGame?: Array<string> // 加个问号，作为可选属性
say(word: string): void
}
let frank: Human = {
name: 'frank',
age: 18,
shape: {
head: '头',
body: '身体'
},
say(word: string){
console.log(`${this.name}: ${word}`)
}
};
frank.say('你好！') // frank: 你好！
上面说到接口就是用代码描述一个对象必须有什么属性，那么如果这个对象是函数怎么办
interface 二则运算 {
(a: number, b: number): number;
逆运算(a: number, b:number):number;
}
let fn = function(): 二则运算 {
let x: any = function(a: number, b: number): number {
return a + b
}
x.逆运算 = function(a: number, b: number): number {
return a -b
}
return x
}
let add: 二则运算 = fn()
console.log(add(1, 2)) // 3
接口的继承
接口是可以继承接口的，先看一个例子
interface Animal {
move(): void
}
interface Human extends Animal {
name: string
age: number
}
let frank: Human = {
age: 18,
name: 'frank',
move(){
console.log('走路')
}
}
frank.move() // 走路
上面例子Human继承了Animal的属性，接口之间使用extends关键字
当然了，接口不仅仅只能继承一个接口，比如：
interface Animal {
move(): void
}
interface 有机物 {
c: boolean,
h: boolean,
o: boolean
}
interface Human extends Animal, 有机物 {
name: string
age: number
}
let frank: Human = {
age: 18,
name: 'frank',
move(){
console.log('走路')
},
c: true,
h: true,
o: true
}
frank.move()
或者接口可以多重继承：
interface 有机物 {
c: boolean,
h: boolean,
o: boolean
}
interface Animal extends 有机物 {
move(): void
}
interface Human extends Animal {
name: string
age: number
}
let frank: Human = {
age: 18,
name: 'frank',
move(){
console.log('走路')
},
c: true,
h: true,
o: true
}
frank.move()
