TypeScript
//基础类型 string,number,boolean
const teacherName:string = 'chen lee';
const teacherAge:number = 28.0;
const isMale:boolean = true;
//数组
const numberArr:number[]=[1,2,3,4,5];
const stringArr:string[]=['1','2','3','4','5'];
const booleanArr:Array<boolean>=[true,false,true];
//对象类型
const user: {name:string,age:number} = {name:'dell',age:18};
const userOne: {name:string,age?:number} = {name:'dell'};
function union(id:string|number)
{
if(typeof id ==='string')
{
console.log(id.toUpperCase());
}
else
{
console.log(id);
}
}
union('asd');
type User = {name: string,age:number};
//type Employee = {name: string,age:number,salary:number};
const userTwo:User = {name:'dell',age:18};
const userThree:User = {name:'dell',age:18};
//any
function showMessage(message:any)
{
console.log(message);
}
//函数类型
function abc(message:string):number
{
return 1;
}
const def: (age:number)=>number = (age:number)=>{return 1;}
//接口类型Interface
interface Student
{
age:number;
sex?:string;
}
//继承
// interface OldStudent extends Student
// {
// name: string;
// }
//const student:Student = {age:18,sex:'male'};
//const oldstudent:OldStudent = {age:18,sex:'male',name:'dell'};
interface Student
{
name: string;
}
const student:Student = {age:18,sex:'male',name:'dell'};
//交叉类型
type Employee = User & {salary:number};
const employee:Employee = {name: 'string',age:13,salary:18};
//断言 Assersion
//const dom: HTMLElement = document.getElementById('#root');
//const dom1: undefined = document.getElementById('#root') as undefined;
//const dom2: undefined = <undefined>document.getElementById('#root');
const testString: string = 123 as any as string;
//字面量类型
const str:'ast'= 'ast';
function getPosition(position:'left'|'right'):string
{
return position;
}
const truthy: true = true;
//
function request(url: string,method:'GET'|'POST'):string
{
return 'sending request';
}
const params:{url:string,method:string}={url:'imooc',method:'POST'}
request(params.url,params.method as 'GET');
//null , undefined
//严格校验会报红
//const testObject:null = undefined;
//const testUndefined:undefined = null;
const testObject:undefined = undefined;
const testUndefined:null = null;
function checkNull(abc:string | null)
{
if(typeof abc === 'string' )
{
console.log(abc.toUpperCase());
}
//console.log(abc!.toUpperCase());表示一定非null
}
//void类型
function getNumber():void//无返回值
{
}
tsconfig.json
bash
{
"compilerOptions":{
"noImplicitAny":true,
"strictNullChecks": true
}
}
"noImplicitAny":true,//对类型转换做检查
将 "noImplicitAny": true 配置在 TypeScript 项目中,意味着禁止隐式使用 any 类型 。当 TypeScript 编译器无法推断出某个变量、参数或属性的类型时,会报编译错误 ,而不是默认将其视为 any。
核心作用
- 强制显式类型声明:所有未标注类型的标识符必须明确指定类型,否则编译失败。
- 提升代码安全性:避免因类型推断失败导致的潜在运行时错误。
- 增强可维护性:代码意图更清晰,便于团队协作和长期维护。
"strictNullChecks": true//对null和undefined做检查
核心作用
- 禁止隐式空值赋值 :在严格模式下,
null和undefined不能 赋值给其他类型(如string、number等),除非显式声明为联合类型(如string | null)。 - 强制空值检查 :访问变量属性前必须先判断其是否为
null或undefined,避免运行时错误。 - 类型推断更精确 :变量赋值为
null会被推断为null类型,赋值为undefined会被推断为undefined类型,而非any。