Ts

297 阅读3分钟
  • 自定义静态类型
interface Demo1{
    uname: string,
    age: number
}

Ts中的四大类型: 对象、数组、类、函数

/*
* 对象
*/
//基础对象类型
const guaPi:{
    name:string,
    age:number
} = {
    name: '瓜皮哦',
    age:13
}

/*
* 数组
*/
//必须是个数组,数组里面必须是字符串
const saoPi: string[] = ['川普', '类似']

/*
* 类
*/
//对象形式的对象类型
class Person{ }
const Pu: Person = new Person()

/*
* 函数
*/
//定义时必须是函数,有返回值必须是字符串
const chuanPu: () => string = () => {
    return '1'
}

类型注解

const numberArr = [1, 2, 3]                 //类型推断
const numArr :number[] = [1, 2, 3]         //类型注解(数组类型)
const strArr :string[] = ['a', 'b', 'c']   //类型注解(字符串数组类型)
const undiArr :undefined[] = [undefined]    //必须是undefined
const NSArr :(string | number)[] = [1, 'a']  //数组中可以是字符串或者是数字
const NSOArr1 :{}[] = [1,'a',{name:'abc'}]  //对象数组
const NSOArr2 :{ name :string }[] = [{ name: 'abc' }]  //对象数组,如果对象里面限制了类型则必须按类型来


/** 
 * type annotation 类型注解 
 * 
 */
let count: number;
count = 123;
console.log(count);
  • 类型注解也就是在定义变量、常量时在变(常)量前加上冒号和类型

类型推断

/** 
  * type inference 类型推断 
 */
let countInference = 123;
  • 类型推断就是,赋值后,可以推断出该变量的类型(简单时可推断)
  • 在环境条件复杂时,是不能推断出类型的。例如:在方法中的传参方式是不能推断出类型的,此时可以看到类型是any

返回类型注解

//代码中出现了空字符串的失误bug
 function demo4(one:number, two:number) {
   return one + two + ''
 }

//解决办法1:  限制类型
 const total2: number = demo4(1, 2)

//解决方法2: 在方法中限制类型(也就是类型注解)
function demo4(one:number, two:number): number {
  return one + two + ''
}
/** 
 * 返回值类型如果写了void那么就不会有返回值,如果return返回值那么就会报错
 */
function sayHello() :void {
  console.log('Hello Wrold!');
  // return 123
}

函数参数中注解

  • 在函数传参中如果是对象参数那么注解是这样写
/** 
 * 这里传一个参数为对象
 * 如何在对象中添加上类型注解{one: number, two: number},这样是不行的;
 * 这样写才是正确的({one, two}: {one:number,two:number}),这样才是可以的;
 */
function add({one, two}: {one:number,two:number}) {
  return one + two
}
const total2 = add({one:1,two:2})

类型别名

//类型别名(相当于变量赋值操作一样)
type Lady = { name: string, age: number }
const classType1: Lady[] = [
  { name: '姓名', age: 18 },
  { name: '瓜皮', age: 19 },
]

//也可以用类的方式类型注解
class Madam {
  name: string;
  age: number;
}
const classType2: Madam[] = [
  { name: '姓名', age: 18 },
  { name: '瓜皮', age: 19 },
]

元组

/** 
 * 元组写法
 *   元组可以限制CSV格式的数据源
 *   不过CSV格式的数据源已经很少了,现在大部分都是对象键值对的形式
 */
const arrPlus:[string,string,number] = ['瓜皮','厚皮',99]

接口

/** 
 * 定义一个接口
 */
interface Girl {
  name: string,
  age: number,
  bust: number,
  //如果后续还有很多未知的条件可以这样写
  /* 这句的意思是属性名是字符串类型的,属性值是任意类型的 */
  [propname: string]: any;

  /*say方法  返回值是字符串类型*/
  say():string
}
const girl = {
  name: '晓彤',
  age: 20,
  bust: 79,
  waistline: 29
}

const screenResume1 = (girl:Girl) => {
  girl.age<24 && girl.bust>=90 && console.log(girl.name+'成功!');
  girl.age>=24 || girl.bust<90 && console.log(girl.name+'失败!');
}

const getResume = (girl:Girl) => {
  console.log(girl.name + '年龄' + girl.age);
  console.log(girl.name + '体重' + girl.bust);
  girl.waistline && console.log(girl.name+ '腰围' + girl.waistline);
}

getResume(girl)