静态类型的理解 VS 动态类型
typeScript的静态类型：
声明的类型不能接受别的类型的数据
动态类型：
<!-- demo.js -->
<!-- 动态类型 -->
let b = 123;
b='123'
静态类型
<!-- demo.ts -->
let b = 123
b='123' //报错
ts的优势
1、更好的错误提示
2、更好的代码语法提示
3、类型声明使代码更易阅读理解
ts环境搭建
npm install typescript -g
npm install -g ts-node
静态类型的深度理解
1、具有声明类型对应的属性和方法：包括基本类型和自定义类型
基础类型和对象类型
// 基础类型
// number,string,null,undefined,symbol,boolean,void
const count:number = 123
const stu:string = 'lui'
// 对象类型
const stud:{
name:string,
age:number
} = {
name:'lui',
age:11
}
const numbers:number[] =[1,2,3]
class Person{}
const lui:Person = new Person()
const getTotal:() => number =()=>{
return 123
}
类型注解 & 类型推断
类型注解(type annotation)：
我们来告诉TS变量是什么类型
let count:number
count = 123
类型推断(type inference)：
TS会自动的尝试分析变量的类型
//如果TS能够自动分析变量类型，我们什么都不需要做了
const a = 1
const b = 2
const total = a + b
//如果TS无法分析变量类型的话，我们就需要使用类型注解
let count:number
count = 123
function getTotal(a:number,b:number){
return a+b
}
const total = getTotal(1,2)
函数相关类型
// js定义函数三种方式
function hello(){}
const hello1 = function(){}
const hello2 = () => {}
//返回值是number
function add(first:number,second:number):number{
return first + second
}
// 函数返回值是null
function sayHello():void{
console.log('hello')
}
// 函数永远不可能执行完成
function errorEmitter():never{
throw new Error()
console.log(123)
}
function errEmitter2():never{
while(true){}
}
// 解构语法 参数添加类型
function add(
{first,second}:{first:number,second:number}
):number{
return first + second
}
function getNumber({first}:{first:number}){
return first
}
const total = add({first:1,second:2})
const count = getNumber({first:1})
//函数的两种声明方法
const func =(str:string)=>{
return parseInt(str,10)
}
const func1:(str:string)=>number = (str)=>{
return parseInt(str,10)
}
基础语法复习
// 基础类型：boolean,number,string,void,undefined,symbol,null
let count:number
count = 123
//对象类型:{},Class,function,[]
//函数的两种声明方法
const func =(str:string)=>{
return parseInt(str,10)
}
const func1:(str:string)=>number = (str)=>{
return parseInt(str,10)
}
const date = new Date()
interface Person{
name:"string"
}
const rawData = '{"name":"lui"}'
const newData:Person = JSON.parse(rawData)
let temp:number|string = 123
temp = '456'
数组和元组
数组
// 数组
const arr:(string|number)[] = [1,2,3,'4']
const strArr:string[]=['a','v']
const undefinedArr:undefined[]=[undefined]
// 对象类型的数组
// const objectArr:{name:String,age:number}[]=[{
// name:'lui',
// age:11
// }]
// type alias 类型别名
type User = {name:string,age:number}
const objectArr2:User[]=[{
name:'lui',
age:22
}]
class Teacher{
name:string
age:number
}
const objectArr3:Teacher[]=[{
name:'lui',
age:22
}]
元组
// 元组 tuple
// 数组中的个数、类型都固定
const studentInfo:[string,string,number] =['lui','female',12]
// csv
// 元组类型数组
const studentsList:[string,string,number][] =[
['lui','female',22],
['zhenzhen','female',32],
['lu','male',12],
]
interface接口
// interface和type相类似，但并不完全一致
// const getPersonName = (person:{name:string}) =>{
// console.log(person.name)
// }
// const setPersonName = (person:{name:string},name:string) =>{
// person.name = name
// }
// 上述通用类型集合，可以抽出来
interface Person {
//readonly name:string; //readonly 表示只读属性，不能赋值和更改
name:string; //readonly 表示只读属性，不能赋值和更改
age?:number; //表示age属性是可选的，不一定要传
[propName:string]:any;//额外的属性，可选
say():string;
}
type Person1 ={
name:string
}
// 类型别名可以表述string等基本类型
type Person2 = string
const getPersonName =(person:Person) =>{
console.log(person.name)
}
const setPersonName = (person:Person,name:string):void=>{
person.name = name
}
const person ={
name:'lui',
sex:'fdsf',
say(){
return 'hello'
}
}
getPersonName(person)
getPersonName({
name:'lui',
sex:'fdsf', //报错 对象字面量赋值 会被强校验
// Person 接口声明时 使用[propName:string]:any 解决了这个问题
say(){
return 'hello'
}
})
setPersonName(person,'lu')
// 类实现接口，必须满足接口的规则
class User implements Person{
name = 'lui'
say(){
return 'hello'
}
}
// 接口继承
interface Student extends Person{
learn():string;
}
// 接口定义函数的类型
interface SayHi{
(word:string):string;
}
const say:SayHi =(word:string)=>{
return word
}
