TypeScript 笔记 - 基本语法

安装

npm install -g typescript

tsc -v

ts转js

tsc demo01.ts

 基本语法

// ts转换成js：tsc index.ts

// 1、类型限定 声明变量时定义其类型
var userName:string = "张三"
var userAge:number = 10
// 2、基本类型
// number
userAge++
console.log("number", userAge)
// string
userName + "欢迎"
console.log("string", userName)
// boolean
var isShow: boolean = true
console.log("boolean", isShow)
// any 不确定类型
var dec:any = "小学生"
if (userAge < 18) {
  dec = true
}
console.log("any", dec)
// array
var list: number[] = [1,2,3] // 不定数量
var list2: [number, string, boolean] = [1,'abc',true] // 确定数量并知晓类型
var list3:any [] = [1,'abc',true] // 不定数量，不定类型
console.log("array", list, list2, list3)
// 有返回值
function fun1():number {
  return 123
}
// 无返回值 void
function fun2():void {
  console.log("hello")
}
// 带参数
function fun3(name:string, age:number):void {
  console.log("hello", name, age)
}
fun1()
fun2()
fun3("李四", 20)

// 复杂数组类型-对象
// 声明方式，通过接口定义对象属性的类型
interface UPerson {
  uname:string,
  uage:number,
  uclass?:number, // ? 代表可有可无属性,非不需项
  sayHi:()=>string
}
var personObj1:UPerson={
  uname:"小红",
  uage: 20,
  sayHi:():string=>{
    console.log("personObj1")
    return "你好"
  }
}
var personObj2:UPerson={
  uname:"小红",
  uage: 20,
  uclass:1,
  sayHi:():string=>{
    console.log("personObj2")
    return "你好"
  }
}

console.log(personObj1.sayHi())
console.log(personObj2.sayHi())

 控制台输出：

number 11
string 张三
boolean true
any true
array [ 1, 2, 3 ] [ 1, 'abc', true ] [ 1, 'abc', true ]
hello
hello 李四 20
PS E:\vue\vue3\LearningTypeScript> tsc demo01.ts 
PS E:\vue\vue3\LearningTypeScript> node demo01.js
number 11
string 张三
boolean true
any true
array [ 1, 2, 3 ] [ 1, 'abc', true ] [ 1, 'abc', true ]
hello
hello 李四 20
hello
PS E:\vue\vue3\LearningTypeScript> tsc demo01.ts 
PS E:\vue\vue3\LearningTypeScript> node demo01.js
number 11
string 张三
boolean true
any true
array [ 1, 2, 3 ] [ 1, 'abc', true ] [ 1, 'abc', true ]
hello
hello 李四 20
personObj1
你好
personObj2
你好