TypeScript基础篇 - TS日常类型 上篇

目录

TS的常见用法介绍

example01.ts

逃避类型检查:any

思考一下~:不知道类型

类型标注

函数(参数和返回值)

匿名函数

TS如何知道匿名函数的类型?


TS是一种标注式语言,不侵入JS的设计

TS的常见用法介绍

文章内容

  • 基础类型、数组
  • any/unkown
  • 类型标注
  • 函数
  • 对象类型
  • 联合
  • 别名
  • 接口
  • 断言
  • 字面类型
  • null and undefined
  • 枚举类型

基础类型、数组

  • string,number,boolean,null【人为赋值null】,undefined【就是没有设置值】
  • Array,T代表数组中元素类型
    • 为什么要求数组中类型统一?人类思考问题的方式;类型的方式思考程序,如一组人
javascript 复制代码
// null;undefined
const a = {}
a["aaa"] // undefined
a["aaa"] = null // null
if(a["aaa"] === null) {}
// js 
new Array()
// TS;浏览器中不支持;要有1TS环境
new Array<T>()

example01.ts

TypeScript 复制代码
// js语法
const a = new Array()
// ts语法
const b = new Array<string>()// 泛型,定义数组每项元素只能式string
b.push('123')// b只能push字符串,其他类型都会编译报错

// 让typescript认为当前文件是一个模块,这个文件里的变量都是局部的
export {}

逃避类型检查:any

TypeScript 复制代码
let obj:any = { x: 0 };
// 后续都不会被检查
// `any`屏蔽了所有类型检查,相当于你相信你对程序的理解式高于TS的
obj.foo();
obj();
obj.bar = 100;
obj = "hello";
const n: number = obj;
const a: {[key: string] :number} = { x: 1 };
a.y = 2
a.z = 3
a.o = "123" // 报错

思考一下~:不知道类型

为什么要提供unknown?

TypeScript 复制代码
let value: unknown;
value = true; // ok
value = 42; // ok
value = "hello"; // ok
let value3:boolean = value; // Error

类型标注

TypeScript 复制代码
let myName:string = "Alice"; // :string 标注类型为字符串
let yourName = "Bob"; // 未明确标注类型,会推到出此类型为string

函数(参数和返回值)

TypeScript 复制代码
// greet : string -> number (Haskell)
function greet(name: string): number {
    console.log("Hello," + name.toUpperCase() + "!!");
}
greet(42) // Error ,要求string
let x: string = greet("omg") // Error , x要求字符串,返回值要求数字

匿名函数

TypeScript 复制代码
const names = ["Alice", "Bob", "Erice"];
// Array<string>
names.forEach(function (s) {
    // s: string // 类型的上下文推到 contextual mapping
    console.log(s.toUppercase());
});
names.map(value => {
    // value: string // 类型的上下文推到 contextual mapping
   const y: number = value // Error
});
names.forEach((s) => {
    console.log(s.toUppercase());
})

TS如何知道匿名函数的类型?

contexture Typing技术

  • 根据上下文(Context)推导类型
  • 还有什么是Context Typing?

上下文是指程序间组件共享的知识,可以是任何东西

TypeScript 复制代码
class A {
    foo(){
        // this就是类A的上下文
        this.bar()    
    }
    bar(){
            
    }
}
function foo2() { // 闭包
    const x = 1
    function bar() { // 子闭包
            
    }
}
相关推荐
小远yyds12 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
阿伟来咯~1 小时前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端1 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱1 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai1 小时前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨1 小时前
在JS中, 0 == [0] 吗
开发语言·javascript
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓2 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4113 小时前
无网络安装ionic和运行
前端·npm
理想不理想v3 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试