tsconfigのオプションで変わる型世界

https://2025.tskaigi.org/talks/ike_keichan

Transcript

1. UTDPOGJHͷΦϓγϣϯͰ
   มΘΔܕੈք
   ,FJTVLF
   *LFEB 
   54,BJHJ !JLF@LFJDIBO
2. 自己紹介 02/16 ,FJTVLF
   *LFEB ɾ౦ژͱؔ੢ʢେࡕ&ژ౎ʣͷ2ڌ఺ੜ׆த ɾTSKaigi 2025, ϑϩϯτΤϯυΧϯϑΝϨϯεؔ੢ 2025ͷελοϑ ɾษڧձେ޷͖Ϛϯ, ษڧձதͷπΠʔτ͕͏Δ͍͞ ɾ࠷ۙ͸ί̋μᘖᘣͷϞʔχϯάʹϋϚͬͯΔ
3. tsconfigに向き合おう！ 03/16 tsconfig ΛͪΌΜͱݟͨ͜ͱ͋Γ·͔͢ʁ
4. tsconfigに向き合おう！ 04/16 ɾσϑΥϧτઃఆͰͷӡ༻ ɾࣗ਎ͷϙδγϣϯతʹؔΘΔػձ͕ͳ͍ ɾϓϩδΣΫτͷ్தࢀըͷͨΊઃఆෆཁ ɾ࠷ॳʹઃఆͯ͠Ҏ߱ɺݟ௚͞ͳ͍ ɾֶशͰ͸ߏจ΍ܕͷॻ͖ํͳͲ͕༏ઌ ɾଞπʔϧͷઃఆʹຒ΋Ε͍ͯΔ UTDPOGJH
   ͕ݟա͝͞Ε͕ͪͳཧ༝ ֶͿɾݟ௚͢ػձͷܽ೗ɹ
5. tsconfigに向き合おう！ 05/16 ͜ͷൃදͰߦ͏͜ͱ ɾॳ৺ऀ޲͚ʹֶͿɾݟ௚ͨ͢Ίͷ͖͔͚ͬΛఏڙ ɾ۩ମతʹ͸ʁ ɹ- ॳظઃఆʢtsc --initʣͷ tsconfig.json ΛϕʔεʹɺҰ෦ͷΦϓγϣϯ ɹɹΛมߋ͠ɺ͋͑ͯʮܕʯΛ؇࿨ ɹ- ઃఆͷมߋͰܕ҆શੑ͕Ͳ͏มΘΔ͔Λݕূ ɾʮܕͷ͋Γ͕ͨΈʯͱʮઃఆͷॏཁੑʯΛ࣮ײ
6. tsconfigに向き合おう！ 06/16 ͜ͷLTͰ tsconfig ΛֶͿɾݟ௚͖͔͚ͬ͢ʹʂ ʢͳΕ͹خ͍͠ʣ
7. 5ZQF4DSJQU
   %PDVNFOUBUJPOʮ$PNQJMFS
   0QUJPOTʯ
   ೥݄Ҿ༻
   IUUQTXXXUZQFTDSJQUMBOHPSHKBUTDPOGJH オプションによる変化 07/16 ܕʹؔ͢ΔΦϓγϣϯ ݱࡏʢʣશ෦ͰΦϓγϣϯ
8. 45&1ɿॳظঢ়ଶ index.ts オプションによる変化 08/16 type User = { id: number; name: string; }; class UserManager { // TS2564:プロパティが未初期化 private users: User[]; // TS7006:引数が暗黙的にany型 addUser(user) { this.users.push(user); return user.id; } findUserById(id: number): User | null { const foundUser = this.users.find((user) => user.id === id); // TS2322:型の不一致 "User | undefined"型 return foundUser; } getUserName(id: number): string { const user = this.findUserById(id); // TS18047:usersがnullable return user.name; } } tsconfig.json { "compilerOptions": { "target": "es2016", "module": "commonjs", "esModuleInterop": true, "strict": true, "skipLibCheck": true, "outDir": "./dist" }, "include": ["src/*.ts"], "exclude": ["node_modules"] }
9. 45&1ɿॳظঢ়ଶ index.ts オプションによる変化 09/16 type User = { id: number; name: string; }; class UserManager { // TS2564:プロパティが未初期化 private users: User[]; // TS7006:引数が暗黙的にany型 addUser(user) { this.users.push(user); return user.id; } findUserById(id: number): User | null { const foundUser = this.users.find((user) => user.id === id); // TS2322:型の不一致 "User | undefined"型 return foundUser; } getUserName(id: number): string { const user = this.findUserById(id); // TS18047:usersがnullable return user.name; } } tsconfig.json { "compilerOptions": { "target": "es2016", "module": "commonjs", "esModuleInterop": true, "strict": true, "skipLibCheck": true, "outDir": "./dist" }, "include": ["src/*.ts"], "exclude": ["node_modules"] } 54ϓϩύςΟ͕ະॳظԽ 54Ҿ਺͕҉໧తʹBOZܕ 54ܕͷෆҰகʢOVMMͱVOEFGJOFEͷ۠ผʣ 54ฦΓ஋͕OVMMBCMF
10. มߋ͢ΔͭͷΦϓγϣϯ オプションによる変化 10/16 ɾstrictPropertyInitialization ɹ- ΫϥεͷϓϩύςΟ͕ॳظԽ͞Ε͍ͯΔ͔ΛνΣοΫ ɾstrictNullChecks ɹ- null ͱ undefined Λݫີʹ۠ผ&νΣοΫ ɾnoImplicitAny ɹ- ҉໧తʹ any ܕΛνΣοΫ
11. 45&1ɿϓϩύςΟॳظԽνΣοΫແޮ index.ts オプションによる変化 11/16 type User = { id: number; name: string; }; class UserManager { // TS2564:プロパティが未初期化 private users: User[]; // TS7006:引数が暗黙的にany型 addUser(user) { this.users.push(user); return user.id; } findUserById(id: number): User | null { const foundUser = this.users.find((user) => user.id === id); // TS2322:型の不一致 "User | undefined"型 return foundUser; } getUserName(id: number): string { const user = this.findUserById(id); // TS18047:usersがnullable return user.name; } } tsconfig.json { "compilerOptions": { "target": "es2016", "module": "commonjs", "esModuleInterop": true, "strict": true, + "strictPropertyInitialization": false, "skipLibCheck": true, "outDir": "./dist" }, "include": ["src/*.ts"], "exclude": ["node_modules"] } Τϥʔ࡟আ
12. 45&1ɿOVMMͱVOEFGJOFEͷݫີͳ۠ผˍνΣοΫແޮ index.ts オプションによる変化 12/16 type User = { id: number; name: string; }; class UserManager { // TS2564:プロパティが未初期化 private users: User[]; // TS7006:引数が暗黙的にany型 addUser(user) { this.users.push(user); return user.id; } findUserById(id: number): User | null { const foundUser = this.users.find((user) => user.id === id); // TS2322:型の不一致 "User | undefined"型 return foundUser; } getUserName(id: number): string { const user = this.findUserById(id); // TS18047:usersがnullable return user.name; } } tsconfig.json { "compilerOptions": { "target": "es2016", "module": "commonjs", "esModuleInterop": true, "strict": true, "strictPropertyInitialization": false, + "strictNullChecks": false, "skipLibCheck": true, "outDir": "./dist" }, "include": ["src/*.ts"], "exclude": ["node_modules"] } Τϥʔ࡟আ Τϥʔ࡟আ
13. 45&1ɿ҉໧తͳBOZܕͷνΣοΫແޮ index.ts オプションによる変化 13/16 type User = { id: number; name: string; }; class UserManager { // TS2564:プロパティが未初期化 private users: User[]; // TS7006:引数が暗黙的にany型 addUser(user) { this.users.push(user); return user.id; } findUserById(id: number): User | null { const foundUser = this.users.find((user) => user.id === id); // TS2322:型の不一致 "User | undefined"型 return foundUser; } getUserName(id: number): string { const user = this.findUserById(id); // TS18047:usersがnullable return user.name; } } tsconfig.json { "compilerOptions": { "target": "es2016", "module": "commonjs", "esModuleInterop": true, "strict": true, "strictPropertyInitialization": false, "strictNullChecks": false, + "noImplicitAny": false, "skipLibCheck": true, "outDir": "./dist" }, "include": ["src/*.ts"], "exclude": ["node_modules"] } Τϥʔ࡟আ ίϯύΠϧ࣌ͷΤϥʔ͕શͯফ͑ͯ͠·ͬͨ…
14. ࣮ߦͰ͖ͳ͍ϓϩάϥϜ index.ts オプションによる変化 14/16 const manager = new UserManager(); // strictPropertyInitialization:falseにより見落とされるエラー // 実行時エラー: Cannot read properties of undefined (reading 'push') const user = { id: 1, name: '山田太郎' }; manager.addUser(user); // strictNullChecks:falseにより見落とされるエラー // 実行時エラー: Cannot read properties of undefined (reading 'find') const nonExistentUser = manager.findUserById(999); // noImplicitAny:falseにより見落とされる不具合 // 実行エラーにもならず許容されてしまう。 const incompleteUser = { name: true }; manager.addUser(incompleteUser);
15. オプションによる変化 15/16 ͦͷΦϓγϣϯʢͷมߋʣ͸ඞཁ͔ʁ ɾྫʹڍ͛ͨΦϓγϣϯΛ੾Γସ͑Δඞཁ͕͋Δͷ͔ʁ ɹ- શͯͷϓϩδΣΫτ͕࠷৽ͷόʔδϣϯ΍ϕετϓϥΫςΟεʹͰ͖ͯ ɹɹ͍ΔΘ͚Ͱ͸ͳ͍ɻ ɹ- TypeScriptҠߦதͷϓϩδΣΫτͰஈ֊తʹಋೖ͍ͯ͠Δ৔߹ͳͲ͸ ɹɹڐ༰ͤ͟ΔΛಘͳ͍͜ͱ΋͋Δɻ ɾԿ͔͠Βͷधཁ͕͋Δ͔ΒΦϓγϣϯ͸ଘࡏ͍ͯ͠Δɻ
16. まとめ 16/16 ·ͱΊ ɾࠓճڍ͛ͨΦϓγϣϯҎ֎ʹ΋100ݸҎ্ͷΦϓγϣϯ͕ଘࡏ ɹ- ΑΓྑ͍ઃఆΛ͢ΔͨΊʹ͸֮͑Δඞཁ͸ͳ͍͕ɺ ɹɹͬ͘͟ΓͲΜͳछྨͷΦϓγϣϯ͕ଘࡏ͢Δ͔஌Δ͜ͱ͕େࣄʂ ɾෆཁʹࢥ͑ΔΦϓγϣϯ΋ϓϩδΣΫτʹΑͬͯ͸ඞཁʂ ɾϓϩδΣΫτຖʹద੾ͳઃఆΛʂtsconfigΛઃఆͯ͘͠Εͨਓʹײँʂ
17. 宣伝 ϑϩϯτΤϯυΧϯϑΝϨϯεؔ੢ 2025 ଓใ͸SNSͰ֬͝ೝ͍ͩ͘͞ʂ Xɿhttps://x.com/fec_kansai Blueskyɿhttps://bsky.app/profile/fec-kansai.bsky.social